<template>
    <div class="commentbox">
        <div class="shuruk">
            <textarea  id="comment2" placeholder="请输入你的评论" v-model="msg1"></textarea>
            <div class="zishu"><span>{{msg1.length}}/200</span></div>
        </div>
        <div class="pre0"><div class="submitcomment" @click="fabiao">发表评论</div></div>
    </div>
</template>

<script setup>
    import {ref,getCurrentInstance} from 'vue'
    import {useRoute,useRouter} from 'vue-router'
    let Route=useRoute()
    let Router=useRouter()
    let {proxy}=getCurrentInstance()
    let msg1=ref("")
    let did=Route.query.did

    let fabiao=async ()=>{
        //将评论写入数据库
      let res = await  proxy.$axios("/creatcomment",{params:{content:msg1.value,did:did}})
        alert(res.data.info)
        //回到聊天窗口
        Router.push({path:"/userchat",query:{id:did}})
    }
</script>
<style lang="scss" scoped>
    .commentbox{
        color: black;
       
        .shuruk{
             width: 800px;
            margin: 0 auto;
             background-color: white;
             position: relative;
        // background-color: yellow;
        // height: 200px;
            #comment2{
                width: 760px;
                margin-left: 20px;
                height: 200px;
                // border: none;
                resize: none;
                outline: none;
            }
            .zishu{
                
                color: grey;
                font-size: 14px;
                span{
                    position: absolute;
                    left: 735px;
                    top: 178px;
                }
            }
        }
        .pre0{
            width: 800px;
            margin: 0 auto;
            background-color: white;
            padding-top: 20px;

        .submitcomment{
        width: 760px;
        height: 40px;
        background-color: #00c792;
        margin: 0 auto;
        color: white;
        font-weight: 500;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
       }
        }
      

    }
</style>